<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/remove.css">
	<link rel="stylesheet" href="css/order.css">
</head>
<body>
		<header>
		<div class="header-top">
			<div class="header-top-con">
				<ul>
					<li><a href="">
						订单追踪
						<i class="icon-headerf icon-new-first"></i>
					</a></li>
					<li><a href="">
						帮助中心
						<i class="icon-headers icon-new-second"></i>
					</a></li>
					<li><a href="">
						在线客服
						<i class="icon-headert icon-new-third"></i>
					</a></li>
					<li><a class="user" href="sign.html">
						登录
						<i id="login" class="icon-headerl icon-new-last"></i>
					</a></li>
					<div id="hover">
						<p class="qie">切换账户</p>
						<p class="me">个人信息</p>
						<p class="tui">退出</p>
					</div>
				</ul>
			</div>
		</div>
		<div class="header-con">
			<div class="header-con-left">
				<h1>
					<img src="img/first/logo-new.png" alt="">
				</h1>
				<ul>
					<li><a href="list.html">男子</a></li>
					<li><a href="">女子</a></li>
					<li><a href="">儿童</a></li>
					<li><a href="">|</a></li>
					<li><a href="">运动</a></li>
					<li><a href="">品牌</a></li>
					<li><a href="">精选系列</a></li>
				</ul>
			</div>
			<ul class="header-con-right">
				<li class="header-seach">
					<i></i>
					<input type="" placeholder="冬季甄选">
				</li>
				<li class="car">
					<i class="icon-cart"></i>
					<span class="icon-car">0</span>
				</li>
			</ul>
		</div>
	</header>
	<article>
		<h3>我的订单</h3>
		<ul class="orderStatus">
			<li>
				全部订单
				<span class="num">0</span>
			</li>
			<li>
				待支付
				<span>0</span>
			</li>
			<li>
				待发货
				<span>0</span>
			</li>
			<li>
				待收货
				<span>0</span>
			</li>
			<li>
				待评价
				<span>0</span>
			</li>
		</ul>
		<h4><i class="icon-bi"></i>
			 <span>评论所购商品赢50奖励积分</span>
		</h4>
		<p class="icon-text">
			成功提交评论（并无退货情况），将可获得50点积分作为奖励。铜牌及以上等级会员，每500待兑换积分，可换50元优惠券！
		</p>
		<p class="xiadandata">
			下单时间：<span class="data">2020/12/15/17:00</span>
		</p>	
		<p class="dingdan">
			共<span class="num-zong">0</span>件商品，订单金额<span class="price-zong">￥0</span>
		</p>
		<ul class="product-list">
		</ul>
		<li id="template">
			<img src="" alt="">
			<div class="product-text">
				<p class="titel"></p>
				<p><span>颜色： </span><span class="color"></span></p>
				<p><span>尺码： </span><span class="size"></span></p>
				<p class="price"></p>
			</div>
			<div class="click-xiang">
				查看详情
			</div>
			<p class="state"></p>
			<button class="remove">删除</button>
		</li>

	</article>

	<div class="footer-top">
		<div class="footer-top-con">
			<ul>
				<li>联系我们</li>
				<li>
					<i class="icon icon-ke"></i>
					在线客服
				</li>
				<li>
					<i class="icon icon-phone"></i>
					400-999-5999
				</li>
				<li>
					<i class="icon icon-email"></i>
					server@adidas.com
				</li>
				<li>
					<i class="icon icon-time"></i>
					9:00-22:00
				</li>
			</ul>
			<div class="right">
				<i class="icon icon-zhui"></i>
				订单追踪
			</div>
		</div>
	</div>
	<div class="footer-con">
		<ul>
			<ul>
				<li class="foot-procuct">产品</li>
				<li>鞋类</li>
				<li>服装</li>
				<li>配件</li>
				<li>最新上市</li>
				<li>新品发售日历</li>
				<li>限量发售</li>
			</ul>
			<ul>
				<li class="foot-procuct">运动</li>
				<li>跑步</li>
				<li>训练</li>
				<li>足球</li>
				<li>篮球</li>
				<li>户外</li>
			</ul>
			<ul>
				<li class="foot-procuct">帮助中心</li>
				<li>关于员工</li>
				<li>尺码表</li>
				<li>adiCLUB会员</li>
				<li>门店查询</li>
				<li>关于我们</li>
				<li>企业社会责任</li>
				<li>ADIDAS APP</li>
			</ul>
			<ul>
				<li class="foot-procuct">网站政策</li>
				<li>使用条款</li>
				<li>隐私声明</li>
				<li>物流配送规则</li>
				<li>退换货规则</li>
				<li>adiCLUB会员规则</li>
				<li>下单指南</li>
				<li>印制服务条款</li>
			</ul>
		</ul>
		<div class="right">
			<p class="foot-procuct">关注我们</p>
			<span class="icon-span span1"></span>
			<span class="icon-span span2"></span>
		</div>
		<div class="right">
			<p class="foot-procuct">职业发展</p>
			<span class="icon-span span3"></span>
		</div>
	</div>
	<ul class="footer-method">
		<li>我们接受下列付款方式：</li>
		<li class="icon icon-zhi"></li>
		<li class="icon icon-wei"></li>
		<li class="icon icon-yin"></li>
	</ul>
	<div class="text">
		<p>企业团购热线及邮箱：&nbsp;&nbsp;&nbsp;团购热线：021-2525 6861</p>
		<p>团购邮箱：adidas.com  (仅限采购金额10万以上)</p>
	</div>
	<div class="footer-bot">
		<div class="footer-bot-con">
			<p class="p1">
				<span class="icon icon-china"></span>
				<span>中国</span>
				<span>隐私声明</span>
				<span>使用条款</span>
				<span>网站地图</span>
				<span>&copy;阿迪达斯体育(中国)有限公司保留所有权利</span>
			</p>
			<p class="p2">
				<span>苏ICP备14048805号-1</span><span class="icon icon-hui"></span><span>&copy;2019adidas江苏工商</span><span class="icon icon-hui"></span><span>苏公安网安备32059002001401号</span>
			</p>
		</div>
	</div>	
</body>
<script src="js/jquery.min.js"></script>
<script src="js/remove.js"></script>
<script>

	$(".remove").click(function(){
		let id = $(this).closest("li").attr("data-id");
		let newItem = $(this).closest("li");
		$.ajax({
			url:"http://10.35.164.241:8080/removeOrder",
			data:{
				id:id,
			},
			success:function(data){
				newItem.fadeOut();
			}
		})
	})
	$.ajax({
		url:"http://10.35.164.241:8080/selectOrderKu",
		data:{
			username:sessionStorage.getItem("showusername"),
		},
		success:function(data){
			let liList = JSON.parse(data);
			let result = 0;
			liList.forEach(function(item){
				let newItem = $("#template").clone(true);
				newItem.attr("id","");
				newItem.find("img").attr("src",item.img);
				newItem.find(".titel").html(item.title);
				newItem.find(".color").html(item.color);
				newItem.find(".size").html(item.size);
				newItem.find(".price").html(item.price);
				newItem.attr("data-id",item.id);
				if(item.state === "true"){
					newItem.find(".state").html("已支付");
				}
				if(item.state === "false"){
					newItem.find(".state").html("未支付");
					newItem.find(".state").css("color","green");
				}
				$(".num").html(liList.length);
				$(".num-zong").html(liList.length);
				result = result + Number(item.price.replace("￥",""));
				$(".price-zong").html("￥"+result);
				newItem.appendTo(".product-list");
			})
		}
	})
	if(sessionStorage.getItem("showusername")){
		let liList = JSON.parse(localStorage.getItem("carmation"));
		liList.forEach(function(item){
			let newItem = $("#template").clone(true);
			newItem.attr("id","");
			newItem.find("img").attr("src",item.src);
			newItem.find(".titel").html(item.title);
			newItem.find(".color").html(item.color);
			newItem.find(".size").html(item.size);
			newItem.find(".price").html(item.price);
			if(sessionStorage.getItem("shifou")==="shi"){
				newItem.find(".state").html("已支付");
			}
			else{
				newItem.find(".state").html("未支付");
				newItem.find(".state").css("color","green");
			}
			newItem.appendTo(".product-list");
		})
	}

	
</script>
</html>